<template>
  <div class="mySetting">
    <div class="card" style="padding: 17px 0;">
      <a-tabs v-model="tabkey" tab-position="left" @change="tabchange">
        <a-tab-pane key="1" tab="头像设置">
          <div class="right_main">
            <div class="title">
              头像设置
            </div>
            <div style="margin-bottom: 25px;margin-top: 20px;">
              <a-avatar :src="img" :size="135"/>
            </div>
            <div style="width:135px;text-align: center;">
              <a-upload
                name="file"
                action="https://app.letuilm.com/api/upload_good_order"
                :multiple="true"
                :show-upload-list="false"
                :before-upload="beforeUpload"
                @change="handleChange3">
                <a-button>
                  <a-icon type="upload"/>
                  更改头像
                </a-button>
              </a-upload>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="个人目标">
          <div class="right_main">
            <div class="title">
              个人目标
            </div>
            <div class="flex row_left col_center">
              <div style="font-size: 14px;color:#101010;margin-right: 40px;">目标数值：</div>
              <div>
                <a-slider
                  :marks="marks"
                  :min="1"
                  :max="150"
                  :step="null"
                  :tipFormatter="null"
                  :dots="true"
                  v-model="slidervalue"
                  @change="sliderchange"
                  style="display:block;width: 900px;"/>
                <div class="flex row_bet" style="color:#BBBBBB;font-size: 12px;">
                  <span style="margin-left:-15px;">初出茅庐</span>
                  <span>小试牛刀</span>
                  <span>登堂入室</span>
                  <span>游刃有余</span>
                  <span>登峰造极</span>
                  <span>炉火纯青</span>
                  <span style="margin-left: 188px;">爸爸</span>
                </div>
              </div>
              <a-input placeholder="目标数值" v-model="perGoals" style="width:200px;margin-left:40px;"/>
            </div>
            <div style="margin-left:90px;margin-top: 117px;">
              <a-button type="primary" @click="doupdatepersonaltarget">确认设置</a-button>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="小组设置">
          <div class="right_main">
            <div class="title">
              小组设置
            </div>
            <div class="flex row_left col_center">
              <div style="font-size: 14px;color:#101010;margin-right: 40px;">小组目标：</div>
              <div>
                <a-slider
                  :marks="marks2"
                  :min="1"
                  :max="150"
                  :step="null"
                  :tipFormatter="null"
                  :dots="true"
                  v-model="slidervalue"
                  @change="sliderchange2"
                  style="display:block;width: 900px;"/>
                <div class="flex row_bet" style="color:#BBBBBB;font-size: 12px;">
                  <span style="margin-left:-15px;">初出茅庐</span>
                  <span>小试牛刀</span>
                  <span>登堂入室</span>
                  <span>游刃有余</span>
                  <span>登峰造极</span>
                  <span>炉火纯青</span>
                  <span style="margin-left: 188px;">爸爸</span>
                </div>
              </div>
              <a-input placeholder="目标数值" v-model="groupGoals" style="width:200px;margin-left:40px;"/>
            </div>
            <div style="margin-left:90px;margin-top: 117px;">
              <a-button type="primary" @click="doupdategrouptarget">确认设置</a-button>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="安全设置">
          <div class="right_main">
            <div class="title">
              安全设置
            </div>
            <div class="flex row_bet col_center" style="margin: 20px 0;">
              <div style="color:#101010">
                <div class="bold">账号密码</div>
                <div>设置字母+数字+字符的密码会更加安全</div>
              </div>
              <div>
                <a-button type="link" @click="openmodal(1)">
                  修改
                </a-button>
              </div>
            </div>
            <a-divider style="margin: 0;"/>
            <div class="flex row_bet col_center" style="margin: 20px 0;">
              <div style="color:#101010">
                <div class="bold">绑定手机</div>
                <div>已绑定手机号：{{ phonenum }}</div>
              </div>
              <div>
                <a-button type="link" @click="openmodal(2)">
                  修改
                </a-button>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-modal
      :visible="editpass"
      :closable="false"
      @ok="handleOk"
      class="modal4"
      :width="483"
      @cancel="handleCancel"
    >
      <div class="editpassbox">
        <a-radio-group v-model="type" @change="typeChange">
          <a-radio-button :value="1" style="width:240px;height:54px;line-height:54px;border: none;text-align: center">
            旧密码修改
          </a-radio-button>
          <a-radio-button :value="2" style="width:240px;height:54px;line-height:54px;border: none;text-align: center">
            手机号修改
          </a-radio-button>
        </a-radio-group>
        <div class="type1" v-if="type ===1">
          <div style="margin-bottom: 17px;"><span>旧密码：</span>
            <a-input-password placeholder="请输入旧密码" style="width: 355px;" v-model="old_pass"/>
          </div>
          <div><span>新密码：</span>
            <a-input-password placeholder="请输入新密码" style="width: 355px;" v-model="new_pass"/>
          </div>
        </div>
        <div class="type2" v-else>
          <div style="margin-bottom: 17px;" class="flex row_bet col_center"><span>验证码：</span>
            <a-input placeholder="请先输入右侧图形验证码" style="width: 200px;margin-right: 60px;" v-model="imgcode"/>
            <img
              :src="codeimg"
              alt=""
              srcset=""
              style="width: 100px;height: 32px;border-radius: 4px;"
              @click="getcode"/>
          </div>
          <div style="margin-bottom: 17px;" class="flex row_bet col_center">
            <div style="width:56px;">手机号：</div>
            <a-input placeholder="请输入手机号" style="width:260px;" v-model="phone"/>
            <a-button
              type="link"
              :disabled="state.smsSendBtn"
              style="width: 102px;"
              @click.stop.prevent="getCaptcha"
              v-text="(!state.smsSendBtn && '获取验证码') || state.time + ' s'"
            ></a-button>
          </div>
          <div style="margin-bottom: 17px;"><span>验证码：</span>
            <a-input placeholder="请输入六位手机验证码" style="width: 355px;" v-model="phone_code"/>
          </div>
          <div><span>新密码：</span>
            <a-input-password placeholder="请输入新密码" style="width: 355px;" v-model="new_pas"/>
          </div>
        </div>
      </div>
    </a-modal>
    <a-modal
      :visible="editphone"
      :closable="false"
      @ok="handleOk2"
      class="modal4"
      :width="483"
      @cancel="handleCancel"
    >
      <div class="editpassbox">
        <div style="padding:16px 30px;font-weight: 600">修改手机号</div>
        <div class="type2">
          <div style="margin-bottom: 17px;" class="flex row_bet col_center"><span>验证码：</span>
            <a-input placeholder="请先输入右侧图形验证码" style="width: 200px;margin-right: 60px;" v-model="imgcode"/>
            <img
              :src="codeimg"
              alt=""
              srcset=""
              style="width: 100px;height: 32px;border-radius: 4px;"
              @click="getcode"/>
          </div>
          <div style="margin-bottom: 17px;" class="flex row_bet col_center">
            <div style="width:56px;">手机号：</div>
            <a-input placeholder="输入手机号" style="width:260px;" v-model="new_phone"/>
            <a-button
              type="link"
              :disabled="state.smsSendBtn"
              style="width: 102px;"
              @click.stop.prevent="getCaptcha"
              v-text="(!state.smsSendBtn && '获取验证码') || state.time + ' s'"
            ></a-button>
          </div>
          <div style="margin-bottom: 17px;"><span>验证码：</span>
            <a-input placeholder="输入六位验证码" style="width: 355px;" v-model="code"/>
          </div>

        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import {
    dochangepass,
    doeditphoneinfo,
    doupdategrouptarget,
    doupdatepersonaltarget,
    doupdateuserimg,
    getgrouptarget,
    getmytarget,
    getusserphone
  } from '@/api/mycenterApi'
  import { ForgePassword, get2step, getSmsCaptcha } from '@/api/loginApi'

  export default {
    name: 'MySetting',
    data () {
      return {
        type: 1,
        editpass: false,
        editphone: false,
        tabkey: '1',
        img: '',
        perGoals: '',
        marks: {
          1: '1,000',
          20: '5,000',
          40: '10,000',
          60: '20,000',
          80: '50,000',
          100: '100,000',
          150: '500,000'
        },
        slidervalue: 1,
        mytarget: 0,
        marks2: {
          1: '8,000',
          20: '20,000',
          40: '50,000',
          60: '100,000',
          80: '200,000',
          100: '500,000',
          150: '1,000,000'
        },
        mytarget2: 0,
        slidervalue2: 1,
        groupGoals: '',
        phone: '',
        phonenum: '',
        old_pass: '',
        new_pass: '',
        new_phone: '',
        code: '',
        state: {
          time: 60,
          smsSendBtn: false,
          passwordLevel: 0,
          passwordLevelChecked: false,
          percent: 10,
          progressColor: '#FF0000'
        },
        codeimg: '',
        code_id: '',
        imgcode: '',
        phone_code: '',
        new_pas: ''
      }
    },
    computed: {},
    created () {
      this.img = JSON.parse(localStorage.getItem('userinfo')).img
    },
    mounted () {

    },
    methods: {
      openmodal (val) {
        this.getcode()
        if (val === 1) {
          this.editpass = true
        } else {
          this.editphone = true
        }
      },
      getcode () {
        get2step({})
          .then(res => {
            console.log('验证码', res)
            // this.requiredTwoStepCaptcha = res.result.stepCode
            if (res.code === 200) {
              this.codeimg = res.data.pic
              this.code_id = res.data.key
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      getCaptcha (e) {
        e.preventDefault()
        const {
          state,
          $message,
          $notification
        } = this

        state.smsSendBtn = true

        const interval = window.setInterval(() => {
          if (state.time-- <= 0) {
            state.time = 60
            state.smsSendBtn = false
            window.clearInterval(interval)
          }
        }, 1000)

        const hide = $message.loading('验证码发送中..', 0)

        getSmsCaptcha({
          phone: this.phone,
          code_id: this.code_id,
          code: this.imgcode
        })
          .then(res => {
            setTimeout(hide, 2500)
            $notification['success']({
              message: '提示',
              description: '验证码获取成功，请查看手机获取',
              duration: 8
            })
          })
          .catch(err => {
            console.log(err)
            setTimeout(hide, 1)
            clearInterval(interval)
            state.time = 60
            state.smsSendBtn = false
          })
      },
      ForgePassword () {
        ForgePassword({
          phone: this.phone,
          code: this.imgcode,
          code_id: this.code_id,
          phone_code: this.phone_code,
          new_pas: this.new_pas
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success(
              {
                content: '修改成功!请牢记您的密码!',
                duration: 5000
              })
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      dochangepass () {
        dochangepass({
          old_pass: this.old_pass,
          new_pass: this.new_pass
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('修改成功!')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      typeChange (e) {
        console.log(`checked = ${e.target.value}`)
        this.type = e.target.value
      },
      handleCancel () {
        this.editpass = false
        this.editphone = false
      },
      handleOk () {
        if (this.type === 1) {
          this.dochangepass()
        } else {
          this.ForgePassword()
        }
      },
      handleOk2 () {
        doeditphoneinfo({
          new_phone: this.new_phone,
          code: this.code
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('修改成功！')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getusserphone () {
        getusserphone().then(res => {
          console.log(res)
          this.phonenum = res.data.phone
        }).catch(err => {
          console.log(err)
        })
      },
      getgrouptarget () {
        getgrouptarget().then(res => {
          console.log(res)
          this.mytarget2 = parseInt(res.data.groupGoals)
          switch (this.mytarget2) {
            case 8000:
              this.slidervalue2 = 1
              break
            case 20000:
              this.slidervalue2 = 20
              break
            case 50000:
              this.slidervalue2 = 40
              break
            case 100000:
              this.slidervalue2 = 60
              break
            case 200000:
              this.slidervalue2 = 80
              break
            case 500000:
              this.slidervalue2 = 100
              break
            case 1000000:
              this.slidervalue2 = 150
              break
          }
        }).catch(err => {
          console.log(err)
        })
      },
      doupdatepersonaltarget () {
        if (this.perGoals === '') {
          this.perGoals = this.mytarget
        }
        doupdatepersonaltarget({
          perGoals: this.perGoals
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('设置成功!')
            this.perGoals = ''
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      doupdategrouptarget () {
        if (this.groupGoals === '') {
          this.groupGoals = this.mytarget2
        }
        doupdategrouptarget({
          groupGoals: this.groupGoals
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('设置成功!')
            this.groupGoals = ''
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getmytarget () {
        getmytarget().then(res => {
          console.log(res)
          this.mytarget = parseInt(res.data.perGoals)
          switch (this.mytarget) {
            case 1000:
              this.slidervalue = 1
              break
            case 5000:
              this.slidervalue = 20
              break
            case 10000:
              this.slidervalue = 40
              break
            case 20000:
              this.slidervalue = 60
              break
            case 50000:
              this.slidervalue = 80
              break
            case 100000:
              this.slidervalue = 100
              break
            case 500000:
              this.slidervalue = 150
              break
          }
        }).catch(err => {
          console.log(err)
        })
      },
      sliderchange (value) {
        console.log(value)
        switch (value) {
          case 1:
            this.mytarget = 1000
            break
          case 20:
            this.mytarget = 5000
            break
          case 40:
            this.mytarget = 10000
            break
          case 60:
            this.mytarget = 20000
            break
          case 80:
            this.mytarget = 50000
            break
          case 100:
            this.mytarget = 100000
            break
          case 150:
            this.mytarget = 500000
            break
        }
      },
      sliderchange2 (value) {
        console.log(value)
        switch (value) {
          case 1:
            this.mytarget2 = 8000
            break
          case 20:
            this.mytarget2 = 20000
            break
          case 40:
            this.mytarget2 = 50000
            break
          case 60:
            this.mytarget2 = 100000
            break
          case 80:
            this.mytarget2 = 200000
            break
          case 100:
            this.mytarget2 = 500000
            break
          case 150:
            this.mytarget2 = 1000000
            break
        }
      },
      handleChange3 (info) {
        if (info.file.response) {
          console.log('info', info.file.response)
          this.img = info.file.response.data.url
          doupdateuserimg({
            img: this.img
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('设置成功!')
            } else {
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      tabchange (key) {
        console.log(key)
        switch (key) {
          case '1':
            break
          case '2':
            this.getmytarget()
            break
          case '3':
            this.getgrouptarget()
            break
          case '4':
            this.getusserphone()
            break
        }
      }
    }
  }
</script>
<style lang='less'>
  .modal4 {
    .ant-input {
      border-radius: 4px;
    }

    .ant-modal-body {
      padding: 0;
    }

    .editpassbox {
      .ant-radio-group {
        width: 100%;
      }

      .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
        background-color: #ffffff !important;
        opacity: inherit;
      }

      .ant-radio-button-wrapper-checked {
        color: #101010;
        font-weight: 600;
      }

      .ant-radio-button-wrapper:hover {
        color: #101010;
      }

      .type1 {
        padding: 46px 32px;
      }

      .type2 {
        padding: 46px 32px;
      }
    }
  }
</style>
<style lang='less' scoped>
  .mySetting {
    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-btn {
      border-radius: 4px;
    }

    /deep/ .ant-tabs-tab {
      width: 196px;
      height: 38px;
      text-align: left;
      color: #101010;

    }

    /deep/ .ant-tabs-tab-active {
      background-color: #DBEEFE;
      color: #2396F9;
    }

    .right_main {
      height: 100vh;
    }

    .title {
      font-size: 20px;
      color: #101010;
    }
  }
</style>
